<template>
  <div>
    <result
      :type="resultType"
      :title="title"
      :description="description">

      <template slot="action">
        <a-button size="large" type="primary" v-if="showBtn" @click="showModal">重新发送激活码</a-button>
        <a-button size="large" style="margin-left: 8px" @click="goHomeHandle">返回首页</a-button>
      </template>
    </result>
    <a-modal
      title="重新发送激活邮件"
      v-model="reActivateModalVisible"
      @ok="sendEmail"
      @cancel="cancelSendEmail"
      :okButtonProps="okButtonProps"
      okText="发送">
      <div style="margin-bottom: 16px">
        <a-input type="text" addonBefore="邮箱地址" v-model="email" @change="verifyEmail">
          <a-tooltip slot="suffix" title="验证信息">
            <a-icon type="info-circle" :style="verifyStyle" />
          </a-tooltip>
        </a-input>
      </div>
    </a-modal>
  </div>
</template>

<script>
  import { Result } from '@/components'
  import { activation, sendActivationEmail } from '@/api/login'

  export default {
    name: 'Activation',
    components: {
      Result
    },
    data () {
      return {
        description: 'Thanks for verifying! You can now get back to what you were doing',
        form: {},
        showBtn: false,
        resultType: 'error',
        reActivateModalVisible: false,
        email: '',
        verifyStyle: 'color: #FF0000',
        okButtonProps: {
          props: {
            disabled: true
          }
        }
      }
    },
    computed: {
      title () {
        const v = this.form && this.form.username || 'xxx'
        const res = this.form && this.form.message || '激活成功'
        return `你的账户：${v} ${res}`
      }
    },
    created () {
      this.form = this.$route.query
      activation(this.form).then(res => {
        this.form.message = res.data
        this.resultType = 'success'
      }).catch(err => {
        this.form.message = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
        // 如果激活激活码错误，弹窗提示重新发送激活码
        if (((err.response || {}).data || {}).code === 1007) {
          this.showBtn = true
        }
        if (((err.response || {}).data || {}).code === 1005) {
          this.resultType = 'success'
        }
      })
    },
    methods: {
      goHomeHandle () {
        this.$router.push({ name: 'login' })
      },
      showModal: function () {
        this.reActivateModalVisible = true
        this.okButtonProps.props.disabled = true
      },
      cancelSendEmail () {
        this.email = ''
        this.reActivateModalVisible = false
      },
      verifyEmail: function () {
        var regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
        if (this.email !== '' && !regEmail.test(this.email)) {
          this.verifyStyle = 'color: #FF0000'
          this.okButtonProps.props.disabled = true
        } else {
          this.verifyStyle = 'color: #00FF00'
          this.okButtonProps.props.disabled = false
        }
      },
      sendEmail () {
        this.reActivateModalVisible = false
        sendActivationEmail(this.email).then(res => {
          this.$notification['success']({
            message: '提示',
            description: res.data,
            duration: 8
          })
        }).finally(() => {
          this.email = ''
        })
      }
    }
  }
</script>

<style scoped>

</style>
